<template>
  <div class="dz">
    <Heds />
    <van-cell is-link @click="showPopup"
      ><van-address-list
        v-model="chosenAddressId"
        :list="list"
        default-tag-text="默认"
        @add="onAdd"
        @edit="onEdit"
      />
    </van-cell>
    <van-popup
      v-model="shou"
      closeable
      position="bottom"
      :style="{ height: '60%' }"
    >
      <!-- 收货地址 -->
      <div class="shou">
        <van-address-edit
          :area-list="areaList"
          show-postal
          show-delete
          delete-button-text="取消"
          show-set-default
          show-search-result
          :search-result="searchResult"
          :area-columns-placeholder="['请选择', '请选择', '请选择']"
          @save="onSave"
          @delete="onDelete"
          @change-detail="onChangeDetail"
        />
      </div>
    </van-popup>
  </div>
</template>

<script>
import axios from "axios";
import { Toast } from "vant";
import { areaList } from "@vant/area-data";
import Vue from "vue";
import { Button } from "vant";
import Heds from "./components/dz/heds.vue";
Vue.use(Button);
export default {
  name: "SH",
  data() {
    return {
      shou: false,
      areaList,
      searchResult: [],
      conten: [],
      chosenAddressId:"1",
      list: [
        {
          id: "",
          name: "",
          tel: "",
          address: "",
          isDefault: "",
        },
      ],
    };
  },
  created() {
    axios.get("/site1").then((res) => {
      this.list = res.data;
    });
  },
  components: {
    Heds,
  },
  methods: {
    to() {},
    onSave(content) {
      Toast("save");
      axios.post("/site1", {
          id: content.areaCode,
          name: content.name,
          tel: content.tel,
          address: content.province+"/"+content.city+"/"+content.county,
          isDefault: content.isDefault,
        })
        .then((res) => {
          this.list = res.data;
        });
      console.log(content);
      content.html;
      this.shou = false;
    },
    onDelete() {
      Toast("取消成功");
      this.shou = false;
    },
    onChangeDetail(val) {
      if (val) {
        this.searchResult = [
          {
            name: "南窑头西区",
            address: "西安市雁塔区",
          },
        ];
      } else {
        this.searchResult = [];
      }
    },
    onAdd() {
      this.shou = true;
    },
    onEdit() {
      // this.shou = true;chosenAddressId
      this.$router.push({ path: "/xiadan", query: {id:this.chosenAddressId} });
    },
    showPopup() {
      this.show = true;
    },
  },
};
</script>

<style scoped>
.bunnt {
  width: 100%;
  /* height: 50px; */
  position: fixed;
  bottom: 0;
  margin-top: 0.5rem;
}
.dian {
  margin-top: 1rem;
  width: 100%;
  height: 6.33rem;
  text-align: center;
}
.dian img {
  margin: auto;
}
.SH .shou {
  position: absolute;
  top: 0;
  width: 100%;
  height: 8.11rem;
  background: #f8f8f8;
}

.dian img {
  width: 1rem;
  height: 1rem;
}

</style>